<script setup>
import { ref, watch, toRefs } from "vue"; //PropType
import people from "../../assets/people.jpg";
const props = defineProps({
  visible: Boolean,
  currentDetail: Object,
});
const emit = defineEmits(["update:visible"]);
const { currentDetail } = toRefs(props);
const detail = currentDetail?.value;
const dialogVisible = ref(true);

watch(dialogVisible, (newVal) => {
  emit("update:visible", newVal);
});
</script>

<template>
  <el-dialog v-model="dialogVisible" :width="1000">
    <template #header>
      <div class="font-bold">员工明细</div>
    </template>
    <div class="flex flex-col h-auto relative">
      <el-scrollbar class="border-t-1 border-b-1 py-4 h-100">
        <el-form
          ref="formRef"
          :model="detail"
          label-width="100px"
          class="flex flex-col my-2"
          size="default"
          :inline="true"
          label-position="left"
        >
          <div class="grid gap-4 grid-cols-3">
            <el-form-item label="姓名" prop="employName">
              <el-input
                v-model="detail.employName"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="性别" prop="sexName">
              <el-input
                v-model="detail.sexName"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="年龄" prop="age">
              <el-input v-model="detail.age" style="width: 180px" disabled />
            </el-form-item>
          </div>
          <div class="grid gap-4 grid-cols-3">
            <el-form-item label="代码" prop="employCode">
              <el-input
                v-model="detail.employCode"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="部门" prop="depName">
              <el-input
                v-model="detail.depName"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="岗位" prop="work">
              <el-input v-model="detail.work" style="width: 180px" disabled />
            </el-form-item>
          </div>
          <div class="grid gap-4 grid-cols-3">
            <el-form-item label="政治面貌" prop="political">
              <el-input
                v-model="detail.political"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="民族" prop="nation">
              <el-input v-model="detail.nation" style="width: 180px" disabled />
            </el-form-item>
            <el-form-item label="籍贯" prop="residence">
              <el-input
                v-model="detail.residence"
                style="width: 180px"
                disabled
              />
            </el-form-item>
          </div>
          <div class="grid gap-4 grid-cols-3">
            <el-form-item label="婚姻情况" prop="married">
              <el-input
                v-model="detail.married"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="文化程度" prop="education">
              <el-input
                v-model="detail.education"
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="手机" prop="mobile">
              <el-input v-model="detail.mobile" style="width: 180px" disabled />
            </el-form-item>
          </div>
          <div class="grid gap-4 grid-cols-3">
            <el-form-item label="入职时间" prop="dateEnter">
              <el-date-picker
                v-model="detail.dateEnter"
                placeholder=""
                style="width: 180px"
                disabled
              />
            </el-form-item>
            <el-form-item label="出生日期" prop="birthday">
              <el-date-picker
                v-model="detail.birthday"
                placeholder=""
                style="width: 180px"
                disabled
              />
            </el-form-item>
          </div>
          <div class="grid gap-4 grid-cols-1">
            <el-form-item label="现居住地" prop="address">
              <el-input type="textarea" v-model="detail.address" disabled />
            </el-form-item>
          </div>
        </el-form>
      </el-scrollbar>
    </div>
    <template #footer> </template>
  </el-dialog>
</template>

<style scoped lang="scss">
:deep(.el-form-item) {
  margin-bottom: 14px;
}

:deep(.el-table th.el-table__cell.is-leaf) {
  border-bottom: 0;
  background-color: #f2f2f2;
}

:deep(.el-table td.el-table__cell),
:deep(.el-table__inner-wrapper::before) {
  border: 0;
}

:deep(.el-table__inner-wrapper::before) {
  height: 0;
}

.el-form-item {
  position: relative;
}

:deep(.el-form-item .report_value) {
  position: absolute;
}

:deep(.el-form-item .report_value .input__inner) {
  border: none;
}

:deep(.el-form-item .reportValueSelect div.el-input) {
  width: 200px;
}
</style>
